<template>
	<view class="page-box">
		<uni-section title="基本信息" type="line"></uni-section>
		<view class="form-box">
			<view>
				<view>{{ formList[0].lable }}</view>
				<input v-model="house[formList[0].name]" type="text" :placeholder="`请填写` + formList[0].lable" placeholder-style="color:#bdbdbd" />
			</view>
			<view>
				<view>{{ formList[1].lable }}</view>
				<input v-model="house[formList[1].name]" type="text" :placeholder="`请填写` + formList[1].lable" placeholder-style="color:#bdbdbd" />
			</view>
			<view>
				<view>{{ formList[2].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[2])" :range="formList[2].array" range-key="val">
						<view :class="formList[2].index === '' ? 'c-gray' : ''">{{ formList[2].index === "" ? '请选择'+formList[2].lable : formList[2].array[formList[2].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[3].lable }}</view>
				<view class="more-input">
					<input type="text" v-model="layout.room" /><text>室</text>
					<input type="text" v-model="layout.liveRoom" /><text>厅</text>
					<input type="text" v-model="layout.toilet" /><text>卫</text>
				</view>
			</view>
			<view>
				<view>{{ formList[4].lable }}</view>
				<input v-model="house[formList[4].name]" type="text" :placeholder="`请填写` + formList[4].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[4].unit}}</text>
			</view>
			<view>
				<view>{{ formList[5].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[5])" :range="formList[5].array" range-key="val">
						<view :class="formList[5].index === '' ? 'c-gray' : ''">{{ formList[5].index === "" ? '请选择'+formList[5].lable : formList[5].array[formList[5].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[6].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[6])" :range="formList[6].array" range-key="val">
						<view :class="formList[6].index === '' ? 'c-gray' : ''">{{ formList[6].index === "" ? '请选择'+formList[6].lable : formList[6].array[formList[6].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[7].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[7])" :range="formList[7].array" range-key="val">
						<view :class="formList[7].index === '' ? 'c-gray' : ''">{{ formList[7].index === "" ? '请选择'+formList[7].lable : formList[7].array[formList[7].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[8].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[8])" :range="formList[8].array" range-key="val">
						<view :class="formList[8].index === '' ? 'c-gray' : ''">{{ formList[8].index === "" ? '请选择'+formList[8].lable : formList[8].array[formList[8].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[9].lable }}</view>
				<view class="more-input">
					<text>第</text><input type="text" v-model="floor.myFloor" /><text>层</text>
					<text>共</text><input type="text" v-model="floor.allFloor" /><text>层</text>
				</view>
			</view>	
			<view>
				<view>{{ formList[10].lable }}</view>
				<input v-model="house[formList[10].name]" type="text" :placeholder="`请填写` + formList[10].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[10].unit}}</text>
			</view>
			<view>
				<view>{{ formList[11].lable }}</view>
				<input v-model="house[formList[11].name]" type="text" :placeholder="`请填写` + formList[11].lable" placeholder-style="color:#bdbdbd" />
				<text >{{formList[11].unit}}</text>
			</view>
			<view>
				<view>{{ formList[12].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[12])" :range="formList[12].array" range-key="val">
						<view :class="formList[12].index === '' ? 'c-gray' : ''">{{ formList[12].index === "" ? '请选择'+formList[12].lable : formList[12].array[formList[12].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
			<view>
				<view>{{ formList[13].lable }}</view>
				<block>
					<picker @change="bindPickerChange($event, formList[13])" :range="formList[13].array" range-key="val">
						<view :class="formList[13].index === '' ? 'c-gray' : ''">{{ formList[13].index === "" ? '请选择'+formList[13].lable : formList[13].array[formList[13].index].val}}</view>
					</picker>
					<uni-icons type="arrowdown" :color="'#bdbdbd'" size="16" />
				</block>
			</view>
		</view>		
		<view class="big-btn" @click="fnSubmit">下一步</view>
	</view>
</template>

<script>
import uniSection from '@/components/uni-section/uni-section.vue';
export default {
	components: {
		uniSection
	},
	onLoad(option) {
		let param = JSON.parse(decodeURIComponent(option.param))		
		this.house.typesOfHouseSource = param.typeOfHouseSource		
	},
	data() {
		return {
			house:{
				'community_name':'',
				'specific_location':'',
				'lease_mode': '',
				'house_layout':'',
				'house_area':'',				
				'house_layout_structure':'',
				'house_renovation_condition':'',
				'orientation_of_house':'',
				'is_equipped_with_elevator':'',
				'house_floor':'',
				'water_cost':'',
				'power_cost':'',
				'lease_cycle':'',
				'pay_mode':''  
			},
			layout:{
				room: '',
				liveRoom: '',
				toilet: ''
			},
			floor:{
				myFloor: '',
				allFloor: ''
			},
			// TODO app启动时，查询字段表然后合成formList
			formList: [
				{
					lable: '小区名称',
					type: 1,
					name: 'community_name'
				},
				{
					lable: '具体位置',
					type: 1,
					name: 'specific_location'
				},
				{
					lable: '租赁方式',
					type: 4,
					name: 'lease_mode',
					index: '',
					array: [{ val: '整租' }, { val: '合租' }]
				},							
				{
					lable: '房屋户型',
					type: 4,
					name: 'house_layout'
				},
				{
					lable: '房屋面积',
					type: 2,
					name: 'house_area',
					unit: '㎡'
				},
				{
					lable: '户型结构',
					type: 3,
					name: 'house_layout_structure',
					index: '',
					array: [{ val: '平层' }, { val: '复式' }, { val: '错层' }, { val: '跃层' }]
				},
				{
					lable: '装修情况',
					type: 3,
					name: 'house_renovation_condition',
					index: '',
					array: [{ val: '毛坯' }, { val: '普通装修' }, { val: '精装修' }]
				},
				{
					lable: '房屋朝向',
					type: 3,
					name: 'orientation_of_house',
					index: '',
					array: [{ val: '朝南' }, { val: '朝东' }, { val: '朝西' }, { val: '朝北' }]
				},
				{
					lable: '配备电梯',
					type: 3,
					name: 'is_equipped_with_elevator',
					index: '',
					array: [{ val: '有电梯' }, { val: '无电梯' }]
				},
				{
					lable: '房屋楼层',
					type: 5
				},
				{
					lable: '水费每吨',
					type: 3,
					name: 'water_cost',
					unit: '元/吨'
				},
				{
					lable: '电费每度',
					type: 3,
					name: 'power_cost',
					unit: '元/度'
				},
				{
					lable: '租赁周期',
					type: 2,
					name: 'lease_cycle',
					index: '',
					array: [{ val: '月租' }, { val: '半年租' }, {val: '年租'}]
				},
				{
					lable: '付款方式',
					type: 2,
					name: 'pay_mode',
					index: '',
					array: [{ val: '押一付三' }, { val: '押一付一' }]
				}
			]			
		};
	},
	methods: {
		bindPickerChange: function(e, box) {			
			box.index = e.detail.value
			this.house[box.name] = e.detail.value + 1	
		},	
		fnSubmit() {				
			this.house.house_floor = this.floor.myFloor + ';' + this.floor.allFloor;
			this.house.house_layout =  this.layout.room + ';' + this.layout.liveRoom + ';' + this.layout.toilet				
			let flag = false
			for(let k in this.house){					
				if(this.house[k] === ''){					
					flag = true
					break
				}
			}
			if(flag === true){				
				uni.showModal({				   
					content: '请填写完整'
				});	
				return
			}			
			uni.navigateTo({
				url: '/pages/house/publishImg?param=' + encodeURIComponent(JSON.stringify(this.house))
			})		
		}
	}
};
</script>

<style lang="scss" scoped>
.page-box {
	padding-bottom: 88rpx;
	box-sizing: border-box;

	/deep/ .uni-section {
		margin-top: 0;
		background: #fff;
	}

	/deep/ .line {
		background-color: #f13b32;
	}
}

.form-box {
	margin-bottom: 20rpx;
	padding-left: 40rpx;
	box-sizing: border-box;
	background: #fff;

	> view {
		display: flex;
		border-bottom: 1px solid #e5e5e5;
		box-sizing: border-box;
		align-items: center;
		font-size: 24rpx;

		&:last-of-type {
			border-bottom: none;
		}

		> view {
			width: 140rpx;
			line-height: 80rpx;
			font-size: 24rpx;

			&.more-input {
				display: flex;
				flex: 1;
				align-items: center;

				input {
					flex: 1;
					padding: 0;
					height: 40rpx;
					border-bottom: 1px solid;
					text-align: center;
				}
			}
		}

		input,
		.uni-input {
			padding: 20rpx 40rpx 20rpx 0;
			box-sizing: border-box;
			flex: 1;
			height: 80rpx;
			line-height: 40rpx;
		}

		text,
		uni-icons {
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		picker {
			flex: 1;
			
			view {
				font-size: 24rpx;
			}
		}
	}
}

.big-btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	line-height: 88rpx;
	text-align: center;
	color: #fff;
	background: #f13b32;
}
</style>
